<template>
  <div class="app-container">
    <myForm :option="option" :form="form">
      <template #usageSlot="{form, prop}">
        <el-input
          v-model="form[prop]"
          size="small"
          placeholder="请输入插槽使用"
          clearable
        />
      </template>
      <template #search="{form}">
        <el-button type="primary" @click="onSearch(form)">查询</el-button>
      </template>
      <template #footer="{form}">
        <el-row type="flex" justify="center">
          <el-button type="info" @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSubmit(form)">提交</el-button>
        </el-row>
      </template>

    </myForm>
  </div>
</template>
<script>
import MyForm from '@/components/my-form/TForm.vue'
import { option } from './const.js'
export default {
  components: {
    MyForm
  },
  data() {
    return {
      option,
      form: {}
    }
  },
  methods: {
    onSubmit(form) {
      console.log(form)
    },
    onReset() {
      // 调用表单的重置方法
      console.log('重置表单')
    },
    onSearch(form) {
      console.log(form)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
